<script setup>
import { ref, watch } from 'vue'
import { upload } from '@/service/file.js'
import { ElMessage } from 'element-plus'
import { VueDraggable } from 'vue-draggable-plus'
import { Close } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:modelValue'])
const imageList = ref([])

watch(
  () => props.modelValue,
  (newVal) => {
    imageList.value = newVal
  },
  { immediate: true }
)

const fileInput = ref()
async function handleFileSelect(event) {
  const fileList = event.target.files
  if (!fileList || fileList.length === 0) return
  const files = Array.from(fileList)
  const uploadPromises = files.map((file) => upload(file))
  let res
  try {
    res = await Promise.all(uploadPromises)
  } catch (err) {
    ElMessage.error(err)
  }
  imageList.value.push(...res.map((result) => result.data))
  event.target.value = ''
}
function openFileSelector() {
  fileInput.value.click()
}
function onTapDeleteButton(index) {
  imageList.value.splice(index, 1)
}
watch(
  imageList,
  () => {
    emit('update:modelValue', imageList.value)
  },
  { deep: true }
)

defineExpose({
  imageList,
})
</script>

<template>
  <VueDraggable animation="200" draggable=".image-list-image" ref="el" v-model="imageList" class="image-list-container">
    <div class="image-list-image" v-for="(image, index) in imageList" :key="image">
      <el-image
        style="width: 120px; height: 120px"
        :src="image"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="imageList"
        show-progress
        :initial-index="index"
      />
      <div class="image-list-image-close-button" @click="onTapDeleteButton(index)">
        <el-icon size="14"><Close /></el-icon>
      </div>
    </div>

    <el-tooltip content="点击添加图片到图片列表，长按图片可排序" placement="bottom-start" effect="light">
      <div class="image-list-add-button" @click="openFileSelector">
        <span class="add-icon">+</span>
        <input
          @change="handleFileSelect"
          ref="fileInput"
          type="file"
          id="fileInput"
          class="hidden-file-input"
          accept="image/*"
          multiple
        />
      </div>
    </el-tooltip>
  </VueDraggable>
</template>

<style scoped lang="scss">
.image-list-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  .image-list-image {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .image-list-image-close-button {
      position: absolute;
      right: -12px; // 右上角偏移，留出边距
      top: -12px;
      width: 24px; // 适当扩大点击区域
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景，不遮挡图片
      border-radius: 50%; // 圆形按钮
      color: #ffffff; // 白色图标
      cursor: pointer; // 鼠标悬浮变指针，提示可点击
      transition: all 0.2s ease; // 过渡动画，更丝滑
      z-index: 10; // 确保在图片上方，不被覆盖

      // hover 效果：加深背景色+轻微放大
      &:hover {
        background-color: rgba(239, 68, 68, 0.8); // 红色背景，突出删除意图
        transform: scale(1.1); // 轻微放大，增强交互反馈
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // 阴影增强层次感
      }

      // 点击时按压效果
      &:active {
        transform: scale(0.95);
      }
    }
  }
  .image-list-add-button {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #ffffff; // 默认纯白背景，更干净
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); // 轻微阴影增强层次感

    &:hover {
      border-color: #409eff; // 主题色边框
      background-color: #ecf5ff; // 淡蓝色背景（与 #409EFF 匹配，更协调）
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1); // hover 时蓝色阴影，强化主题
    }
  }
}

// 父元素 hover 时子元素加号变色
.image-list-add-button:hover .add-icon {
  color: #409eff;
}

.add-icon {
  font-size: 28px;
  color: #94a3b8;
  font-weight: 300;
  transition: color 0.2s ease;
}
.hidden-file-input {
  display: none;
}
</style>
